<!-- 时间轴折线图 -->
<template>
	<el-card>
		<template #header> 时间轴折线图 </template>
		<div :id="id" :class="className" :style="{ height, width }"></div>
	</el-card>
</template>

<script setup lang="ts">
	import * as echarts from "echarts";

	const props = defineProps({
		id: {
			type: String,
			default: "largeAraChart",
		},
		className: {
			type: String,
			default: "",
		},
		width: {
			type: String,
			default: "200px",
			required: true,
		},
		height: {
			type: String,
			default: "200px",
			required: true,
		},
	});

	let base = +new Date(1988, 9, 3);
	let oneDay = 24 * 3600 * 1000;
	let data = [[base, Math.random() * 300]];
	for (let i = 1; i < 20000; i++) {
		let now = new Date((base += oneDay));
		data.push([+now, Math.round((Math.random() - 0.5) * 20 + data[i - 1][1])]);
	}

	const options = {
		tooltip: {
			trigger: 'axis',
			position: function (pt : any) {
				return [pt[0], '10%'];
			}
		},
		xAxis: {
			type: 'time',
			boundaryGap: false
		},
		yAxis: {
			type: 'value',
			boundaryGap: [0, '100%']
		},
		dataZoom: [
			{
				type: 'inside',
				start: 0,
				end: 20
			},
			{
				start: 0,
				end: 20
			}
		],
		series: [
			{
				name: 'Fake Data',
				type: 'line',
				smooth: true,
				symbol: 'none',
				areaStyle: {},
				data: data
			}
		]
	}

	const chart = ref<any>("");
	onMounted(() => {
		// 图表初始化
		chart.value = markRaw(
			echarts.init(document.getElementById(props.id) as HTMLDivElement)
		);

		chart.value.setOption(options);

		// 大小自适应
		window.addEventListener("resize", () => {
			chart.value.resize();
		});
	});

	onActivated(() => {
		if (chart.value) {
			chart.value.resize();
		}
	});
</script>

<style>
</style>